<template>
  <div class="page">
    <!-- header -->
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="选择教练时间段"
    ></van-nav-bar>
    <div class="app-page">
      <div class="coach-grid">
        <van-cell center>
          <template #icon>
            <div class="coach-grid">
              <img src="../../assets/jiaol.jpg" class="j-avatar" alt />
            </div>
          </template>
          <template #title>
            <div class="j-name">教练名</div>
            <div class="j-desc">所属驾校：大众驾校</div>
          </template>
          <template #right-icon>
            <van-icon name="like-o" />
          </template>
        </van-cell>
      </div>
      <van-cell-group>
        <van-field
          v-model="datevalue"
          label="更改日期"
          placeholder="请选择"
          readonly
          @click="showPopup()"
        />
      </van-cell-group>
      <div class="yc-cells">
        <van-cell center v-for="(item, i) in Lists" :key="i">
          <template #title>{{item.text}}</template>
          <template #right-icon>
            <van-button type="info">剩余名额:{{item.value}}</van-button>
          </template>
        </van-cell>
      </div>
    </div>
    <!-- 时间选择 -->
    <van-popup v-model="showPicker" round position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @confirm="onConfirm"
        @cancel="onCancel"
        title="选择预约时间"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      datevalue: "2020-05-30",
      showPicker: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      Lists: [
        { text: "15:00-15:29", value: 0 },
        { text: "16:00-16:29", value: 1 },
        { text: "16:30-16:59", value: 2 },
        { text: "17:00-17:29", value: 3 }
      ]
    };
  },
  methods: {
    onCancel() {
      this.showPicker = false;
    },
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    showPopup() {
      this.showPicker = true;
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type === "day") {
        return `${val}日`;
      }
      return val;
    },
    onConfirm(val) {
      this.showPicker = false;
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }
      this.datevalue = `${year}-${month}-${day}`;
      this.show = false;
    }
  },
    created(){
    let dsBridge = require("dsbridge");
         dsBridge.call("goBack","", function() {
           history.go(-1);
         });
   },
};
</script>
<style scoped>
.app-page {
  background-color: #f5f5f5;
}

.set-cells /deep/ .van-cell-group {
  margin-bottom: 15px;
}
</style>
